<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
            <meta name="apple-mobile-web-app-capable" content="yes"/>
        </f:facet>
        <h:outputStylesheet library="css" name="main.css"/>
        <h:outputScript library="js" name="main.js"/>
        <ui:insert name="head">
            <title>FASTJSF</title>
        </ui:insert>
        <style>

            .ui-layout-north {
                z-index:20 !important;
                overflow:visible !important;;
            }

            .ui-layout-north .ui-layout-unit-content {
                overflow:visible !important;
            }

        </style>
    </h:head>
    <h:body>
        <ui:insert name="menu">
            <p:growl id="messages"/>
        </ui:insert>

        <h:form id="fm" class="mainfm">
            <ui:insert name="form">
            </ui:insert>
            <p:separator /> 
            <p:growl id="growl" showDetail="true" sticky="true" /> 
            <p:layout fullPage="true">
                <p:layoutUnit position="north" >
                    <p:menubar>
                        <p:submenu label="跳转" icon="ui-icon-document">
                            <p:submenu label="页面" icon="ui-icon-contact">
                                <p:menuitem value="首页" url="#" />
                                <p:menuitem value="人员" url="/view/user.xhtml" />
                                <p:menuitem value="文档" url="/view/document.xhtml" />
                            </p:submenu>
                            <p:menuitem value="Open" url="#" />
                            <p:separator />
                            <p:menuitem value="Quit" url="#" />
                        </p:submenu>

                        <p:submenu label="Edit" icon="ui-icon-pencil">
                            <p:menuitem value="Undo" url="#" icon="ui-icon-arrowreturnthick-1-w" />
                            <p:menuitem value="Redo" url="#" icon="ui-icon-arrowreturnthick-1-e" />
                        </p:submenu>

                        <p:submenu label="Help" icon="ui-icon-help">
                            <p:menuitem value="Contents" url="#" />
                            <p:submenu label="Search" icon="ui-icon-search">
                                <p:submenu label="Text">
                                    <p:menuitem value="Workspace" url="#" />
                                </p:submenu>
                                <p:menuitem value="File" url="#" />
                            </p:submenu>
                        </p:submenu>

                        <p:submenu label="Actions" icon="ui-icon-gear">
                            <p:submenu label="Ajax" icon="ui-icon-refresh">
                                <p:menuitem value="Save" actionListener="#{menuView.save}" icon="ui-icon-disk" update="messages"/>
                                <p:menuitem value="Update" actionListener="#{menuView.update}" icon="ui-icon-arrowrefresh-1-w" update="messages"/>
                            </p:submenu>
                            <p:submenu label="Non-Ajax" icon="ui-icon-newwin">
                                <p:menuitem value="Delete" actionListener="#{menuView.delete}" icon="ui-icon-close" update="messages" ajax="false"/>
                            </p:submenu>
                        </p:submenu>

                        <p:menuitem value="Quit" url="http://www.primefaces.org" icon="ui-icon-close" />

                        <f:facet name="options">
                            <p:inputText style="margin-right:10px" placeholder="Search"/>
                            <p:commandButton type="button" value="Logout" icon="ui-icon-extlink" />
                        </f:facet>
                    </p:menubar>
                </p:layoutUnit>
                <p:layoutUnit position="south" size="100">
                    <h:outputText value="Bottom content." />
                </p:layoutUnit>
                <p:layoutUnit position="west" size="300">
                    <p:tree id="chn" value="#{treeContextMenuView.root}" var="doc" selectionMode="single" selection="#{treeContextMenuView.selectedNode}" dynamic="true">                    
                        <p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed">
                            <h:outputText value="#{chn.name}"/>
                        </p:treeNode>
                        <p:treeNode type="document" icon="ui-icon-document">
                            <h:outputText value="#{chn.name}" />
                        </p:treeNode>
                        <p:treeNode type="picture" icon="ui-icon-image">
                            <h:outputText value="#{chn.name}" />
                        </p:treeNode>
                        <p:treeNode type="mp3" icon="ui-icon-video">
                            <h:outputText value="#{chn.name}" />
                        </p:treeNode>
                    </p:tree>

                    <p:contextMenu for="docs">
                        <p:menuitem value="View" update="messages" actionListener="#{treeContextMenuView.displaySelectedSingle}" icon="ui-icon-search" />
                        <p:menuitem value="Delete" update="docs" actionListener="#{treeContextMenuView.deleteNode}" icon="ui-icon-close"/>
                    </p:contextMenu>
                </p:layoutUnit>
                <p:layoutUnit position="east" size="200">
                    <h:outputText value="Right Content" />
                </p:layoutUnit>
                <p:layoutUnit position="center">
                    <h:outputText value="Center Content" />
                </p:layoutUnit>
            </p:layout>

            <ui:insert name="growl">
                <p:growl globalOnly="true" showDetail="true" sticky="true">
                    <p:autoUpdate/>
                </p:growl>
            </ui:insert>

            <!-- 禁用掉输入框默认的回车提交事件 -->
            <p:commandButton id="my_dftCmdBtn" type="button" style="position: fixed;bottom: 0;right: 0;visibility: hidden;"/>
            <p:defaultCommand target="my_dftCmdBtn"/>
        </h:form>

        <ui:insert name="outer"/>
        <p:tooltip position="left"/>
        <p:confirmDialog id="cfmDlg" styleClass="cfmDlg" global="true" closeOnEscape="true" header="确认框" responsive="true">
            <p:commandButton value="确定" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
            <p:commandButton value="取消" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
        </p:confirmDialog>
    </h:body>
</html>
